<template>
  <div class="main">
    <editor v-model="data" :showDetail="true"></editor>
  </div>
</template>

<script setup>
import editor from "@/components/LowCode/editor.jsx";
// import dataJson from "./data.json"
import { editorConfig as config } from "@/components/LowCode/editor-config.jsx";
import { ref, provide } from "vue";

let dataString = '{"container":{"width":"537","height":601},"blocks":[{"top":483,"left":351,"zIndex":1,"key":"button","props":{"text":"button","type":"primary","size":"large"},"focus":false},{"top":218,"left":222,"zIndex":1,"key":"input","props":{},"focus":false},{"left":239,"top":485,"zIndex":1,"key":"button","selfAlignCenter":false,"props":{},"focus":false},{"left":220,"top":263,"zIndex":1,"key":"input","selfAlignCenter":false,"props":{},"focus":false},{"left":129,"top":486,"zIndex":1,"key":"button","selfAlignCenter":false,"props":{},"focus":false},{"left":-169,"top":279,"zIndex":1,"key":"button","selfAlignCenter":false,"props":{},"focus":false},{"top":15,"left":26,"zIndex":1,"key":"text","props":{"text":"表单名称","color":"#060101","size":"16px"},"focus":false},{"left":143,"top":269,"zIndex":1,"key":"text","selfAlignCenter":false,"props":{"text":"密码"},"focus":false},{"left":214,"top":86,"zIndex":1,"key":"text","selfAlignCenter":false,"props":{"text":"中安工业","color":"#E80707","size":"16px"},"focus":false},{"left":142,"top":222,"zIndex":1,"key":"text","selfAlignCenter":false,"props":{"text":"账号"},"focus":false}]}'
const data = ref(JSON.parse(dataString));
provide("config", config);
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 155px);
}
</style>
